<template>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="onSubmit" class="login100-form validate-form">

                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45"></span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="">
                        <van-field v-model="mobile" name="mobile" label="手机号码" placeholder="请输入手机号码"
                            :rules="[{ required: true, message: '请填写手机号码' }, { pattern, message: '请填写正确的手机号码' }]" />
                    </div>


                    <div class="wrap-input100 validate-input m-b-10" data-validate="">
                        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </div>

                    <div class="container-login100-form-btn p-t-10">
                        <van-button round block type="success" native-type="submit">登录注册 </van-button>
                    </div>

                    <div class="text-center w-full p-t-25 p-b-230">
                        <router-link to="/" style="color: white;">首页</router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>
<script setup>
const mobile = ref('13060808087')
const password = ref('root')
const pattern = /^1[356789]\d{9}$/;
// getCurrentInstance 是 Vue 3 提供的一个函数，能够让你在 setup 函数的上下文中获取当前组件的实例,当前组件实例的代理对象
const { proxy } = getCurrentInstance()
const token = proxy.$route.query.token ?? '';
const onSubmit = async(values) => {
    // 获取路径中的get参数token
    if (proxy.$route.query.token != '') {
        values.token = token;
    }
    let result = await Api.login(values)
    if(result.code == 1)
    {
        // 存储用户信息
        proxy.$cookies.set('LoginUser', result.data)
        success({
            message: result.msg,
            onClose: () =>{
                proxy.$router.push('/business/index')
            }
        });
    }
    else
    {
        error(result.msg);
    }
};
</script>
<style>
@import url('/assets/css/main.css');
@import url('/assets/css/util.css');
</style>